<template>
    <view class="goods-container">
        <view @click="goodsDetail" class="goods-info u-flex u-p-20" hover-class="none">
            <view class="left u-flex u-flex-1 u-line-1">
                <view class="goods-img">
                    <u-image width="80" height="80" shape="circle" :src="goods.thumbnail" mode=""></u-image>
                </view>
                <view class="u-line-1 u-m-l-20 u-m-r-20">{{ goods.goods_name }}</view>
            </view>
        </view>
        <view class="goods-asks">
            <textarea class="textarea" :value="ask_content" placeholder="说出您的问题,已购买的人会为您解答哦~" maxlength="120" @input="handleAskContent"/>
            <view class="u-flex u-p-30">
                <view class="" @click="selCheck" v-model="anonymous">
                    <u-icon class="eye-off" name="eye-off" size="40" v-if="!show"></u-icon>
                     <u-icon class="eye" name="eye" size="40" v-if="show"></u-icon>
                    <text class="u-m-l-10" type>匿名提问</text>
                </view>
                <view class="ask-num">(3个字以上)</view>
                <view class="ask-num">{{ ask_content.length }}/120</view>
            </view>
        </view>
        <view class="ask-btn" :class="disabled ? 'ask-btn-color' : 'ask-btn-color-disabled'" @click="handleSubmitQuestion">发布</view>
    </view>
</template>

<script>
    import * as API_Member from '@/api/members.js'
    import * as API_Goods from '@/api/goods.js'

	export default {
		data() {
			return {
                goods_id: '', //商品ID
                goods: '', //商品详情
                ask_content: '', //问答内容
                anonymous: 'NO',//匿名提问
                show: true,
                disabled: '' //是否可发布
			}
		},
        onLoad(options) {
            this.goods_id = options.goods_id
            this.getGoodsDetail()
        },
		methods: {
            //键盘输入的内容
            handleAskContent(e) {
                this.ask_content = e.detail.value
                if (this.ask_content.length > 2) {
                    this.disabled = true
                } else {
                    this.disabled = false
                }
            },
              selCheck (anonymous) {

                    if ( this.anonymous === 'YES') {
                        this.anonymous = 'NO'
                        this.show=true
                    } else {
                        this.anonymous = 'YES'
                        this.show=false
                    }
                 },
            //发布
            handleSubmitQuestion() {
                if (this.ask_content.length < 3) {
                    this.$u.toast('提问字数不能少于3个字哦')
                } else {
                    API_Member.consultating(this.goods_id, this.ask_content,this.anonymous).then(response => {
                        this.$u.toast('发布成功,正在向已购用户发送邀请。')
                        // #ifdef APP-PLUS || H5
                        uni.navigateBack()
                        // #endif
                        // #ifdef MP
                        this.ask_content = ''
                        setTimeout(() => { uni.navigateBack() },1500)
                        // #endif
                    })
                }
            },
            goodsDetail() {
                this.navigateTo(`/goods-module/goods?goods_id=${this.goods_id}`)
            },
            // 获取商品详情信息
            getGoodsDetail(){
                API_Goods.getGoods(this.goods_id).then(response=>{
                    this.goods = response
                })
            }
		}
	}
</script>

<style lang="scss" scoped>
    .goods-container {
        .goods-info {
            /deep/ .u-image__image {
                border-radius: 10rpx !important;
            }
        }
        .goods-asks {
            background-color: #FFFFFF;
            border-radius: 25rpx;
            .textarea {
                padding: 30rpx;
                width: 100%;
                height: 200rpx;
                color: #333;
                font-size: 28rpx;
                box-sizing: border-box;
            }
            .ask-num {
                color: #979797;
                font-size: 24rpx;
                margin-right: 30rpx;
            }
        }
        .ask-btn {
            text-align: center;
            margin: 30rpx;
            border-radius: 50rpx;
            padding: 15rpx 50rpx;
            background-color: #FFFFFF;
            &.ask-btn-color {
                color: #ff5000;
                border: 1rpx solid #ff5000;
            }
            &.ask-btn-color-disabled {
                color: #B5B5B5;
                border: 1rpx solid #B5B5B5;
            }
        }
    }
</style>
